window.addEventListener("load", function () {
    // 返回顶部
    let tops = $(".tops");
    let top = $(".top");
    //    按钮移入
    top.addEventListener("mouseover", function () {
        this.className = "tops";
    });
    //按钮 移除
    top.addEventListener("mouseout", function () {
        this.className = "top";
    });

    // 判断浏览器高度
    this.window.addEventListener("scroll", function () {
        if (window.scrollY >= 400) {
            top.style.display = "block"; //显示
        } else {
            top.style.display = "none"; //隐藏
        }
    });

    // 点击返回顶部
    top.addEventListener("click", function () {
        window.scroll({
            left: 0,
            top: 0,
            behavior: "smooth",
        });
    });

    // 模拟服务器上的传递过来的数据
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: false },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ];

    console.log(apiTypeData);
    let html = "";
    let list = $(".apiCateList");
    apiTypeData.forEach(function (v, i) {
        if (i === 0) {
            html += `<li class="active" title="${v.keyword}">${v.name} </li>`;
        } else if (v.isnew) {
            html += `<li class="bw" title="${v.keyword}">${v.name} </li>`;
        } else {
            html += `<li title="${v.keyword}">${v.name} </li>`;
        }
    });

    list.innerHTML = html;
    /**
     * 清空所有li样式
     */
    function add(s) {
        s.forEach(function (v) {
        v.classList.remove("active");
        });
    }
    // 给API增加点击样式
    let li = $(".apiCateList li");
    // 获取所有li节点
    let ipt = $(".ipt strong")
    // console.log(iptValue)
    li.forEach(function (v) {
        // 点击li节点执行add函数
        v.addEventListener("click", function () {
            add(li)
            v.classList.add("active");
            ipt.textContent = this.textContent;
            $("#ipt").value = this.title;

        });
    });

    //API列表区域 模拟服务器返回的数据
    let listDataArr = [
        //第一行
        {
            img: "API_01.jpg",
            name: "2021出行防疫政策指南1",
            price: "免费",
            isSpecial: false,
        },
        {
            img: "API_02.jpg",
            name: "身份证实名认证",
            price: "￥0.2000/次",
            isSpecial: true,
        },
        {
            img: "API_03.jpg",
            name: "天气预报",
            price: "免费",
            isSpecial: false,
        },
        {
            img: "API_04.jpg",
            name: "银行卡四元素校验",
            price: "￥0.3360/次",
            isSpecial: true,
        },
        {
            img: "API_05.jpg",
            name: "短信API服务",
            price: "￥0.0400/次",
            isSpecial: true,
        },

        //第二行
        {
            img: "API_01.jpg",
            name: "2021出行防疫政策指南2",
            price: "免费",
            isSpecial: false,
        },
        {
            img: "API_02.jpg",
            name: "身份证实名认证",
            price: "￥0.2000/次",
            isSpecial: true,
        },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        {
            img: "API_04.jpg",
            name: "银行卡四元素校验",
            price: "￥0.3360/次",
            isSpecial: true,
        },
        {
            img: "API_05.jpg",
            name: "短信API服务",
            price: "￥0.0400/次",
            isSpecial: true,
        },
        //第三行
        {
            img: "API_01.jpg",
            name: "2021出行防疫政策指南3",
            price: "免费",
            isSpecial: false,
        },
        {
            img: "API_02.jpg",
            name: "身份证实名认证",
            price: "￥0.2000/次",
            isSpecial: true,
        },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        {
            img: "API_04.jpg",
            name: "银行卡四元素校验",
            price: "￥0.3360/次",
            isSpecial: true,
        },
        {
            img: "API_05.jpg",
            name: "短信API服务",
            price: "￥0.0400/次",
            isSpecial: true,
        },
        //第四行
        {
            img: "API_01.jpg",
            name: "2021出行防疫政策指南4",
            price: "免费",
            isSpecial: false,
        },
        {
            img: "API_02.jpg",
            name: "身份证实名认证",
            price: "￥0.2000/次",
            isSpecial: true,
        },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        {
            img: "API_04.jpg",
            name: "银行卡四元素校验",
            price: "￥0.3360/次",
            isSpecial: true,
        },
        {
            img: "API_05.jpg",
            name: "短信API服务",
            price: "￥0.0400/次",
            isSpecial: true,
        },
    ];
    // 分页按钮

 function btns(){
        let btns = $(".btns");
        let dltc = $(".dltc");
        let mc= $(".mc");
        btns.forEach(function(v){
        v.addEventListener("click",function(e){
        mc.style.display="block"
        e.stopPropagation();
})
        $("body").addEventListener("click",function(){
            mc.style.display="none";
        })
        dltc.addEventListener("click",function(e){
            e.stopPropagation();
        })
        })
    }

    // 分页按钮

let apiCardsList =  $(".apiCardsList");

// 点击开启蒙层
$(".apiCardsList").addEventListener("click",function(e){

    if(e.target.localName === "a"){
        $(".mc").style.display = "block";
        // 隐藏滚动条
        document.body.style.overflow = "hidden";
// 阻止签默认事件

    }
})
// 点击关闭蒙层
$(".mc").addEventListener("click",function(){
    $(".mc").style.display = "none";
    // 显示滚动条
    document.body.style.overflow = "auto";

})
$(".dltc").addEventListener("click",function(e){
    e.stopPropagation();
})



    let fy = $(".pagination li")
    fy.forEach(function (v) {
        v.addEventListener("click", function () {
            add(fy);
            this.classList.add("active");
            render(Number(v.textContent),5,listDataArr);
            // btns()
        });
    });

function render(pagination, pageSize, arr){
    let starIndex = (pagination - 1) * pageSize;
    const  result = arr.slice(starIndex,starIndex + pageSize);
    let cardsHtml = ""
    result.forEach(function (v) {
        cardsHtml += `

        <li>
        <a href="api-detail.html">
        ${v.isSpecial ? '<span>企业认证</span>' : ""}
        <img src='../imgs/${v.img}' alt = "图片已损坏"/>
        <p class = "tit">${v.name}</p>
        <p class = ${v.isSpecial ? "mf " : "tit"}>${v.price}</p>
        <div class="btns"> <button id = "btns"><a href = "#">申请获取数据</a></button> </div>
        </a>
        </li>

        `
    });
    $(".apiCardsList").innerHTML = cardsHtml

}


// 默认渲染第一页
render(1,5,listDataArr)
// btns()


});